@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropZone';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

.hidden {
  display: none;
}

.container {
  @include composite-var($drop-zone-container-single);
  @include composite-var($drop-zone-content-layout-single);

  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 100%;
  min-width: 174px;
  min-height: 80px;

  background-color: $sys-neutral-background2-level;
  border-color: $sys-neutral-decor-default;

  .title {
    @include composite-var($sans-title-s);

    margin: 0;
    color: $sys-neutral-text-main;
  }

  .description {
    @include composite-var($sans-body-s);

    color: $sys-neutral-text-light;
  }

  &:hover {
    border-color: $sys-primary-accent-hovered;

    .description {
      color: $sys-neutral-text-support;
    }
  }

  &:focus-visible {
    @include outline-var($container-focused-s);

    outline-color: $sys-primary-accent-default;
    outline-offset: $spacing-state-focus-offset;

    .description {
      color: $sys-neutral-text-support;
    }
  }

  &[data-over] {
    background-color: $sys-primary-background;
    border-color: $sys-primary-accent-hovered;

    .title {
      color: $sys-primary-text-main;
    }

    .description {
      color: $sys-primary-text-support;
    }
  }

  &[data-disabled] {
    cursor: not-allowed;
    background-color: $sys-neutral-background;
    border-color: $sys-neutral-decor-disabled;

    .title {
      color: $sys-neutral-text-light;
    }

    .description {
      color: $sys-neutral-text-disabled;
    }
  }
}